<template>
  <div>
    <div class="box center">
      <el-tabs
        v-model="tabsValue"
        tab-position="left"
        type="border-card"
        style="min-height: 600px; width: 100%; margin-bottom: 20px"
        :before-leave="beforeLeave"
      >
        <el-tab-pane
          v-for="item in personalCenter"
          :key="item.name"
          :label="item.name"
          :name="item.name"
        >
          <Account
            v-if="tabsValue === '账户设置' && userInfo.in_userid"
            :userInfo="userInfo"
            @gotoAuch="gotoAuch"
          ></Account>
          <Balance
            v-if="tabsValue === '余额充值' && userInfo.in_userid"
            :userInfo="userInfo"
          ></Balance>
          <Order
            v-if="tabsValue === '我的订单' && userInfo.in_userid"
            :userInfo="userInfo"
          ></Order>
          <RealName
            v-if="tabsValue === '实名认证' && userInfo.in_userid"
            :userInfo="userInfo"
          ></RealName>
          <Info
            v-if="tabsValue === '个人信息' && userInfo.in_userid"
            :userInfo="userInfo"
            @gotoBalance="gotoBalance"
          ></Info>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Account from "./account.vue";
import Balance from "./balance.vue";
import Order from "./order.vue";
import RealName from "./realName.vue";
import Info from "./info.vue";
import { personalCenter as personalCenterList } from "./index";
// import { getUserInfoApi } from "@/api/person";
import store from "@/store";
export default {
  components: {
    Account,
    Balance,
    Order,
    RealName,
    Info,
  },
  data() {
    return {
      tabsValue: "",
    };
  },

  created() {
    const command = this.$route.params.command;
    const index = this.personalCenter.findIndex(
      (item) => item.command === command
    );
    this.tabsValue = this.personalCenter[index].name;

    // this.getData();
  },
  computed: {
    personalCenter() {
      return personalCenterList.filter((item) => item.command !== "50");
    },
    ...mapState({
      userInfo: (state) => state.user,
    }),
  },
  methods: {
    getSubstringBeforeLastSlash(str) {
      const lastIndex = str.lastIndexOf("/");
      if (lastIndex !== -1) {
        return str.substring(0, lastIndex);
      } else {
        return false;
      }
    },
    beforeLeave(newValue) {
      this.tabsValue = newValue;
      const index = this.personalCenter.findIndex(
        (item) => item.name === newValue
      );
      const command = this.personalCenter[index].command;
      const path = this.getSubstringBeforeLastSlash(this.$route.path);
      if (path) {
        const topath = `${path}/${command}`;
        if (this.$route.path === topath) return;
        this.$router.push(topath);
      }
    },
    // async getData() {
    //   const res = await getUserInfoApi();
    //   if (res.data) this.userInfo = res.data;
    //   console.log(res.data);
    // },
    gotoAuch() {
      this.beforeLeave("实名认证");
    },
    gotoBalance() {
      this.beforeLeave("余额充值");
    },
  },

  watch: {
    $route: {
      handler(to, from) {
        const command = to.params.command;
        const index = this.personalCenter.findIndex(
          (item) => item.command === command
        );
        this.tabsValue = this.personalCenter[index].name;
      },
      deep: true,
      immediate: false,
    },
  },
};
</script>

<style lang="scss" scoped>
.center {
  width: 1200px;
  margin: 0 auto;
}
.box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.avatar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

::v-deep #tab-0 {
  // padding: 0;
  height: 100px !important;
}
::v-deep .el-tabs--left .el-tabs__item.is-left {
  text-align: center !important;
}
</style>
